// 新增团队情况组件


import React, { Component } from 'react';
import NetUitl from '../utils/HttpUtil';
import {Button ,Form, Input,Row,Col , Table ,message} from "antd";
import TitleBar from "./TitleBar";
import "./add.scss";


class AddTeam extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource:[
                {
                    personOnDuty:"",
                    phoneOnDuty:"",
                    teamId:"",
                    teamName:"",
                    teamType:"",
                    teamLeader:"",
                    teamPeopleNum:"",
                    attendanceNum:"",
                    attendancePercent:"",
                    absenteeismNum:"",
                    absenteeismPercent:""
                }
            ],
        }

        this.columns=[
            {
                title: '团队名称',
                dataIndex: 'teamName',
                width:"15%",
                render: (text,record)=>{
                    console.log(record,"record",text)
                    if (this.props.isAdd === true){
                        return <Input value={record.teamName}  disabled={true}></Input>
                    }else{
                        return <span>{text}</span>
                    }
                }
            },
            {
                title: '团队类型',
                dataIndex: 'teamType',
                width:"12.5%",
                render: (text,record)=>{
                    if (this.props.isAdd === true){
                        return <Input placeholder={"必填：字符"} value={record.teamType} onChange={this.typeChange}></Input>
                    }else{
                        return <span>{text}</span>
                    }
                }
            },
            {
                title: '团队负责人',
                dataIndex: 'teamLeader',
                width:"12.5%",
                render: (text,record)=>{
                    if (this.props.isAdd === true){
                        return <Input placeholder={"必填：字符"} value={record.teamLeader}  onChange={this.leaderChange}></Input>
                    }else{
                        return <span>{text}</span>
                    }
                }
            },
            {
                title: '团队人数',
                dataIndex: 'teamPeopleNum',
                width:"12.5%",
                render: (text,record)=>{
                    if (this.props.isAdd === true){
                        return <Input placeholder={"必填：数字"} value={record.teamPeopleNum}  onChange={this.numberChange}></Input>
                    }else{
                        return <span>{text}</span>
                    }
                }
            },
            {
                title: '出勤人数',
                dataIndex: 'attendanceNum',
                width:"12.5%",
                render: (text,record)=>{
                    if (this.props.isAdd === true){
                        return <Input placeholder={"必填：数字"} value={record.attendanceNum} onChange={this.outChange}></Input>
                    }else{
                        return <span>{text}</span>
                    }
                }
            },
            {
                title: '出勤比率',
                dataIndex: 'attendancePercent',
                width:"12.5%",
                render: (text,record)=>{
                    let tResult = `${text*100}%`
                    return <span>{tResult}</span>
                }
            },
            {
                title: '缺勤人数',
                dataIndex: 'absenteeismNum',
                width:"12.5%",
            },
            {
                title: '缺勤比率',
                dataIndex: 'absenteeismPercent',
                width:"12.5%",
                render: (text,record)=>{
                    let tResult = `${text*100}%`
                    return <span>{tResult}</span>
                }
            },
        ]
    }


    componentDidMount(){
        this.publicFn(this.props)
    }
    componentWillReceiveProps(nextprops){
        this.publicFn(nextprops)
    }

    //获取父组件传过来的数据
    publicFn(nextprops){
        let dataSource=[];
        let team = nextprops.allData &&  nextprops.allData.team?nextprops.allData.team:""
        let {id,date, stateType} = nextprops
        dataSource.push(team);
        console.log(nextprops,"componentWillReceiveProps")
        this.setState({dataSource:dataSource,id:id,date:date,stateType:stateType})
    }

    //团队名称change事件
    nameChange=(e)=>{
        let {dataSource} = this.state;
        dataSource[0].teamName = e.target.value;
        console.log(e.target.value,dataSource)
        this.setState({dataSource});
        // let allData={};
        // allData.team = dataSource[0];
    }

    //团队类型change事件
    typeChange=(e)=>{
        let {dataSource} = this.state;
        dataSource[0].teamType = e.target.value;
        this.setState({dataSource});
        // let allData={};
        // allData.team = dataSource[0];
        // this.props.viewer.setState({allData})
    }

    //团队负责人change事件
    leaderChange=(e)=>{
        let {dataSource} = this.state;
        dataSource[0].teamLeader = e.target.value;
        this.setState({dataSource});
        // let allData={};
        // allData.team = dataSource[0];
        // this.props.viewer.setState({allData})
    }

    //团队人数change事件
    numberChange=(e)=>{
        var re =  /^(0|\+?[1-9][0-9]*)$/;
        if (e.target.value !== ""){
            if (!re.test( e.target.value)) {
                return  message.warning("请输入正整数！");
            }
        }

        let {dataSource} = this.state;
        dataSource[0].teamPeopleNum = e.target.value;
        console.log(dataSource,"add")
        if(dataSource[0].attendanceNum){
            dataSource[0].absenteeismNum=dataSource[0].teamPeopleNum-dataSource[0].attendanceNum
        }
        this.setState({dataSource});
        // let allData={};
        // allData.team = dataSource[0];
        // this.props.viewer.setState({allData})
    }

    //出勤人数change事件
    outChange=(e)=>{
        let teamNum = this.state.dataSource[0].teamPeopleNum;
        if (teamNum === "" || teamNum === undefined || teamNum === null){
            return  message.warning("请先填写团队人数！")
        }

        var re =  /^(0|\+?[1-9][0-9]*)$/;
        if (e.target.value !== ""){
            if (!re.test( e.target.value)) {
                return  message.warning("请输入正整数！");
            }
        }

        let {dataSource} = this.state;
        let teamPeopleNum = dataSource[0].teamPeopleNum;
        let attendanceNum = e.target.value;
        let attendancePercent = attendanceNum/teamPeopleNum;
        let absenteeismNum = teamPeopleNum - attendanceNum;
        let absenteeismPercent = (teamPeopleNum - attendanceNum)/teamPeopleNum ;
        dataSource[0].attendanceNum=attendanceNum;
        dataSource[0].attendancePercent=attendancePercent.toFixed(2);
        dataSource[0].absenteeismNum=absenteeismNum;
        dataSource[0].absenteeismPercent=absenteeismPercent.toFixed(2);
        this.setState({dataSource});

        // let allData={};
        // allData.team = dataSource[0];
        // this.props.viewer.setState({allData})
    }

    //值班人change事件
    personOnDutyChange=(e)=>{
        let {dataSource} = this.state;
        dataSource[0].personOnDuty = e.target.value;
        this.setState({dataSource});
        // let allData={};
        // allData.team = dataSource[0];
        // console.log(this.props.viewer)
        // this.props.viewer.setState({allData}
    }

    //联系电话change事件
    phoneOnDutyChange=(e)=>{

        if (e.target.value !== ""){
            // if(!(/^1[3456789]\d{9}$/.test(e.target.value))){
            //     e.target.value = "";
            //     return  message.warning("手机号码格式有误，请重填");
            // }
        }

        let {dataSource} = this.state;
        dataSource[0].phoneOnDuty = e.target.value;
        this.setState({dataSource});
        // let allData={};
        // allData.team = dataSource[0];
        // this.props.viewer.setState({allData})
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout={
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        }
        const {isAdd} = this.props;
        console.log(this.state.dataSource)

        return (
            <div className="addteam-box">
                <div className={"addteam-top"}>
                    <div>
                        <TitleBar name={"团队情况"}></TitleBar>
                    </div>
                    <div style={{marginLeft:40}} className="guding">
                        {isAdd === true ? <Form {...formItemLayout}>
                            <Row>
                                <Col span={"10"}>
                                    <Form.Item label="本日值班">
                                        {getFieldDecorator('name', {
                                            initialValue:this.props.add === true ? "" :this.state.dataSource[0].personOnDuty
                                        })(<Input placeholder={"必填：字符"} onChange={this.personOnDutyChange}/>)}
                                    </Form.Item>
                                </Col>
                                <Col span={"10"} offset={"2"}>
                                    <Form.Item label="联系电话">
                                        {getFieldDecorator('phone', {
                                            initialValue:this.props.add === true ? "" :this.state.dataSource[0].phoneOnDuty
                                        })(<Input type="tel" placeholder={"必填：电话号码"} onBlur={this.phoneOnDutyChange}/>)}
                                    </Form.Item>
                                </Col>
                            </Row>
                        </Form>

                        : <div className={"addteam-top-span"}>
                                <div>
                                    <span>本日值班：</span>
                                    <span>{this.state.dataSource[0]. personOnDuty}</span>
                                </div>
                                <div style={{marginLeft:24}}>
                                    <span>联系电话：</span>
                                    <span>{this.state.dataSource[0].phoneOnDuty}</span>
                                </div>
                            </div>}
                    </div>
                </div>
                <div className={"addteam-main"}>
                    <Table
                        className={"addTeam-table"}
                        bordered
                        columns={this.columns}
                        dataSource={this.state.dataSource}
                        pagination={false}
                    />
                </div>
            </div>
        );
    }
}

export default  Form.create()(AddTeam)
